<template>
  <view class="grid">
    <u-grid :col="4">
      <u-grid-item v-for="item in list">
        <view>
          <view>
            <image :src="$kt.file.byPath(item.icon)" class="icon"></image>
          </view>
          <view class="text">{{item.text}}</view>
        </view>
      </u-grid-item>

      <u-grid-item>
        <view>
          <view style="height: 70rpx;">
            <view style="height: 10rpx"></view>
            100
          </view>
          <view class="text">防雷剩余寿命天数</view>
        </view>
      </u-grid-item>

      <u-grid-item>
        <view>
          <view style="height: 70rpx;">
            <view style="height: 10rpx"></view>
            100
          </view>
          <view class="text">雷击次数记录</view>
        </view>
      </u-grid-item>

    </u-grid>

  </view>
</template>

<script>
export default {
  data() {
    return {
    // 1、过压报警记录
    // 2、欠压报警记录
    // 3、漏电报警记录
    // 4、过载报警记录
    // 5、短路报警记录
    // 6、防雷失效报警记录
    // 7、防雷剩余寿命天数
    // 8、雷击次数记录
      list:[
        {
          icon: 'icon/baojing/guoya.svg',
          text: '过压报警记录'
        },
        {
          icon: 'icon/baojing/qianya.svg',
          text: '欠压报警记录'
        },
        {
          icon: 'icon/baojing/loudian.svg',
          text: '漏电报警记录'
        },
        {
          icon: 'icon/baojing/guozai.svg',
          text: '过载报警记录'
        },
        {
          icon: 'icon/baojing/duanlu.svg',
          text: '短路报警记录'
        },
        {
          icon: 'icon/baojing/fangleishixiao.svg',
          text: '防雷失效报警记录'
        },
      ]
    };
  },
  methods: {
    toRecharge(){
      this.$emit('toRecharge');
    }
  }
}
</script>

<style lang="scss">
.grid{
  text-align: center;
  .icon {
    width: 70rpx;
    height: 70rpx;
  }
  .text{
    font-size: 26rpx;
    color: #333;
    height: 70rpx;
  }
}

</style>
